<template>
    <!-- 列表商品组件 -->
    <div class="commodity_list" ref="myElement">
        <div class="list_top">
            <div class="list_top_img">
                <van-image radius="5" :src="data?.productImage ? data?.productImage + '?x-oss-process=image/resize,w_300' : ''" />
                <img src="" alt="">
                <div class="list_top_img_tag" v-if="data?.hmMechanismsList[1]?.cooperationMode">多机制</div>
            </div>
            <div class="list_top_right">
                <div class="list_top_right_title">
                    <div class="title">{{ data?.styleName }}</div>
                    <div class="status">待选品</div>
                </div>
                <div class="list_top_right_introduce">{{ data?.sellingPoints }}</div>
                <div class="list_top_right_money">
                    <div class="money_left">
                        <div v-if="data?.hmMechanismsList[0].cooperationMode === '分佣'">
                            ￥<span>{{ data?.hmMechanismsList[0].price }}</span>
                        </div>
                        <div v-else>
                            ￥<span>{{ data?.hmMechanismsList[0].costPrice }}</span>
                        </div>
                        <div v-if="data?.hmMechanismsList[0].cooperationMode === '分佣'" class="commission">
                            <span class="fonts">佣</span>
                            <span class="numbers">
                                {{ data?.hmMechanismsList[0].commission }}%
                            </span>
                        </div>
                    </div>
                    <div class="money_right">
                        {{ data?.hmMechanismsList[0].liveStreamingMechanism }}
                    </div>
                </div>
                <div class="list_top_right_bottom">
                    <div class="specs">
                        <span>{{ data.specs }}</span>
                    </div>
                    <van-image :src="!data.shoppingStatus ? icon_jiagou : icon_jiagouchenggong"
                        @click.stop="!data.shoppingStatus && addCart()" />
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { defineProps, ref } from 'vue'
const icon_jiagou = new URL("@/assets/operation/icon_jiagou.png", import.meta.url).href
const icon_jiagouchenggong = new URL("@/assets/operation/icon_jiagouchenggong.png", import.meta.url).href
const props = defineProps({
    data: { type: Object, default: () => { } },
})
const myElement = ref()
const emit = defineEmits(['addcart'])
/** 新增购物车 */
const addCart = () => {
    const rect = myElement.value.getBoundingClientRect();
    const elLeft = rect.left;
    const elTop = rect.top;
    emit('addcart', elLeft, elTop, props.data)
}
</script>

<style lang="less" scoped>
@import url(@/views/operation/operationHomeList/components/style/invest.less);
</style>